<template>
    <el-dialog title="选择表单Key" :visible.sync="_listenerDrawer" :append-to-body="appendToBody" 
               width="1299"
               :before-close="close">
        <div class="filter-container">
            <el-input v-model="listQuery.formKey" placeholder="表单key" style="width: 200px;" class="filter-item"
                      @keyup.enter.native="btnQuery"/>
            <el-input v-model="listQuery.formName" placeholder="表单名称" style="width: 200px;" class="filter-item"
                      @keyup.enter.native="btnQuery"/>
            <el-dropdown split-button type="primary" @click="btnQuery" class="filter-item">
                <i class="el-icon-search el-icon--left"></i>查询
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item icon="el-icon-zoom-out" @click.native="btnReset">重置</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
           
        </div>
        <el-table
                :data="records"
                ref="multipleTable"
                @selection-change="selectionChange"
                border
                fit
                highlight-current-row
                style="width: 100%;"
               
        >
            <el-table-column label="表单key" prop="formKey" align="center">
                <template slot-scope="scope"><span>{{ scope.row.formKey }}</span></template>
            </el-table-column>
            <el-table-column label="表单名称" prop="formName" align="center">
                <template slot-scope="scope"><span>{{ scope.row.formName }}</span></template>
            </el-table-column>
            <el-table-column label="操作" align="center">
                <template slot-scope="{row}">
                    <el-button type="text" @click="userKey(row)">使用</el-button>
                </template>
            </el-table-column>
        </el-table>
        <pagination v-show="total>0" :total="total" :current.sync="listQuery.current" :size.sync="listQuery.size"
                    @pagination="list"/>

    </el-dialog>
</template>

<script>
    import Pagination from '@/components/Pagination'
    import {getAction} from '@/api/manage'
    import {Message} from 'element-ui'

    export default {
        components: {Pagination},
        props: {
            modeler: {
                type: Object,
                required: true
            },
            element: {
                type: Object,
                required: true
            },
            listenerDrawer: {
                type: Boolean,
                default: false
            },
            title: {
                type: String,
                default: ''
            },
            type: {
                type: String,
                default: 'Execution'
            },
            multipleSelect: {
                type: Boolean,
                default: false
            },
            appendToBody: {
                type: Boolean,
                default: false
            },
            selectUserType:{
                type: String,
                default: ''
            }
        },
        computed: {
            _listenerDrawer: {
                get() {
                    return this.listenerDrawer
                },
                set(v) {
                    this.$emit("changeSelectFormKey", v)
                }
            }
        },
        data() {
            return {
                filterText: '',
                treeData: [],
                signType:'before',
                defaultProps: {
                    children: 'children',
                    label: 'title',
                    isLeaf: 'hasChildren',
                    data: 'data'
                },
                records: [],
                total: 0,
                selectedRecords: [],
                listQuery: {
                    current: 1,
                    size: 10,
                    userId: undefined,
                    userName: undefined,
                    deptId: undefined
                },
                currOrgId: '',
                records: null,
                selectedRecords: [],
                total: 0,
            }
        },
        mounted() {
            this.list()
        },
        methods: {
            close() {
                this._listenerDrawer = false
            },
            filterNode(value, data) {
                if (!value) return true
                return data.label.indexOf(value) !== -1
            },
            getTreeData() {
                getAction('/api/blade-system/dept/tree', {type: this.type}).then(res => {
                    
                    const data = res.data.data
                    this.treeData = data
                })
            },
            handleNodeClick(node) {
                this.currOrgId = node.id
                this.listSysUsers()
            },
            listSysUsers() {
                this.listQuery.deptId = this.currOrgId
                getAction('/api/blade-system/user-admin/list', this.listQuery).then(res => {
                    const data = res.data.data
                    this.records = data.records;
                    this.total = data.total
                })
            },
            btnQuery() {
                this.listQuery.current = 1
                this.listSysUsers()
            },
            btnReset() {
                this.currOrgId = ''
                this.listQuery = {
                    current: 1,
                    size: 10,
                    userId: undefined,
                    userName: undefined,
                    orgId: undefined
                }
                this.listSysUsers()
            },
            rowClick(row) {
                if (!this.multipleSelect) {
                    this.selectedRecords = []
                    this.selectedRecords[0] = row
                } else {
                    let arr = this.selectedRecords
                    let index = arr.findIndex(item => item.userId === row.userId)
                    if (index < 0) {
                        arr.push(row)
                    } else {
                        arr.splice(index, 1)
                    }
                }
            },
            btnRemoveAll() {
                this.selectedRecords = []
            },
            btnRemove(row) {
                let arr = this.selectedRecords;
                arr.splice(arr.findIndex(item => item.userId === row.userId), 1)
            },
            confirm() {
                if (!this.selectedRecords || this.selectedRecords.length == 0) {
                    Message.error('请先选择用户')
                    return
                }
                let params = []
                params.push(this.selectedRecords)
                if(this.selectUserType == 'sign'){
                    params.push(this.signType)
                }
                debugger
                if (this.multipleSelect) {
                    this.$emit("selectUserFinished", ...params);
                } else {
                    //this.$emit("selectUserFinished", params[0][0]);
                    this.updateUserProperties(params[0][0])
                }
                this.selectedRecords = []
                this.records = []
                this._listenerDrawer = false;
            },
            updateUserProperties(user){
                const modeling = this.modeler.get('modeling')
                let descriptor = 'flowable'+':'
                let properties = {}
                properties[descriptor+'assignee'] = user.userId
                properties[descriptor+'assigneeName'] = user.userName
                modeling.updateProperties(this.element, properties)
                this.$emit('selectUserDone',user)
            },
            list() {
                getAction('/api/sdt-flow/flowable/form/list', this.listQuery).then(res => {
                    const {data} = res.data
                    this.records = data.records;
                    this.total = data.total
                })
            },
            btnQuery() {
                this.listQuery.current = 1
                this.list()
            },
            btnReset() {
                this.listQuery = {
                    current: 1,
                    size: 10,
                    formKey: undefined,
                    formName: undefined
                }
                this.list()
            },
            userKey(row){
                 this.$emit('selectFormKeyDone',row)
                 this._listenerDrawer = false;
            }
        },
        watch: {
            filterText(val) {
                this.$refs._selectOrgTree.filter(val)
            }
        },
    }
</script>

<style scoped>
 .el-badge__content.is-fixed {
        top: 12px;
    }
 .sign-more{
    width: 184px;
    float: right;
    height: 40px;
    line-height: 40px;
 }
</style>>